<!--  -->
<template>
    <div>
        <div v-for="(item, index) in list" :key="index">
            <div v-if="equMsgs[index]" class="oneTip text-xs">
                <div style="color:#e2cb84;font-size: .5rem;" class="flex">
                    <div class="w-16">攻击强化:{{ equMsgs[index].attack }}</div>
                    <div>Buff量:{{ equMsgs[index].buffer }}</div>
                </div>
                <div v-for="(item1, index1) in equMsgs[index].props" :key="index" style="color: #b59834;"
                    class="text-ellipsis overflow-hidden w-40 text-nowrap">
                    {{ item1 }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, watch, ref } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import type { AttackAndBuff } from '@/types/defaults';
const $store = useCounterStore();
const { descList } = storeToRefs($store)
const props = defineProps<{
    id: number,
    list: number[],
}>();

const equMsgs = ref<AttackAndBuff[]>([]);

watch($store.descList, (newVal) => {
    const msg = newVal.findIndex((e) => e.id == props.id);
    if (msg > -1) {
        let lst: AttackAndBuff[] = []
        props.list.forEach(item => {
            lst.push($store.findProp(props.id, item))
        })
        equMsgs.value = lst;
    }
}, {
    deep: true
})


</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.oneTip {
    border-bottom: 1px solid #fff5;
    padding-bottom: 0.5rem;
}
</style>